<div class="wy-sec">
    <div class="u-title wy-sec-wrap clearfix">
      <h3 class="wy-sec-tit"><span class="f-ff2">听歌排行</span></h3>
      <span class="sub s-fc3">
        累计听歌{{listenSongs}}首
      </span>
      <div class="more tab-type">
        <span [class.active]="recordType === 1" (click)="onChangeType.emit(1)">最近一周</span>
        <nz-divider nzType="vertical"></nz-divider>
        <span [class.active]="recordType === 0" (click)="onChangeType.emit(0)">所有时间</span>
      </div>
    </div>
  
    <nz-table
      class="wy-table"
      #basicTable
      [nzData]="records"
      [nzFrontPagination]="false"
      nzBordered
      nzNoResult="暂无音乐！">
      <thead>
        <tr>
          <th nzWidth="80px"></th>
          <th>标题</th>
          <th nzWidth="120px">时长</th>
          <th nzWidth="80px">歌手</th>
          <th>播放次数</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of basicTable.data; index as i">
          <td class="first-col">
            <span>{{i + 1}}</span>
            <i class="ico play-song" title="播放" [class.current]="currentIndex === i" (click)="onAddSong.emit([item.song, true])"></i>
          </td>
          <td class="song-name">
            <a [routerLink]="['/songInfo', item.id]">{{item.song.name}}</a>
          </td>
          <td class="time-col">
            <span>{{item.song.dt / 1000 | formatTime}}</span>
            <p class="icons">
              <i class="ico add" title="添加" (click)="onAddSong.emit([item.song, false])"></i>
              <i class="ico like" title="收藏" (click)="onLikeSong.emit(item.song.id)"></i>
              <i class="ico share" title="分享" (click)="onShareSong.emit(item.song)"></i>
            </p>
          </td>
          <td>
            <ng-container *ngFor="let singer of item.song.ar; last as isLast">
              <a [routerLink]="['/singer', singer.id]">{{singer.name}}</a>
              <em [hidden]="isLast">/</em>
            </ng-container>
          </td>
          <td>{{item.playCount}}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>